<template>
  <div>
    <Header style="background:#4629C0;"></Header>
    <div id="search" class="flex-center-column">
      <span>Quickly find chemical information from authoritative sources</span>
      <div id='search_box' class="flex-center" >
        <aside id="try" @click="()=>isTry = ! isTry">
          try
          <i v-if="isTry" class="el-icon-caret-top"></i>
          <i v-else class="el-icon-caret-bottom"></i>
        </aside>
        <!--<aside id="content">-->
          <input type="text">
        <!--</aside>-->
        <aside id="button" class="flex-center">
          <i class="el-icon-search"></i>
        </aside>
        <div id="search_box_muen" v-if="!isTry">
            <h2>Not sure what to seach? Try these example:</h2>
            <ul>
              <li>
                <span class="title1">CAS#:</span
                ><span class="title2">700-06-1</span>
              </li>
              <li>
                <span class="title1">Chemlcal Name:</span
                ><span class="title2">Salicylic</span>
              </li>
              <li>
                <span class="title1">Publication:</span
                ><span class="title2">TR-580、TOX-48</span>
              </li>
              <li>
                <span class="title1">Project:</span
                ><span class="title2"
                  >Radiofrequency radiation emissions from cellular phones</span
                >
              </li>
              <li id="big_li">
                <span class="title1">Study Number:</span>
                <div>
                  <div>
                    <span class="title3">CEBS Accessioon Number:</span
                    ><span class="title2">002-02223-0003-0000-4</span>
                  </div>
                  <div>
                    <span class="title3">NTP TDMS Number</span
                    ><span class="title2">20203-01</span>
                  </div>
                </div>
              </li>
              <li id="big_li">
                <span class="title1">Study and Data Typer:</span>
                <div>
                  <div>
                    <span class="title3">NTP Study Type:</span
                    ><span class="title2">Micronucieus</span>
                  </div>
                  <div>
                    <span class="title3">Data Typer</span
                    ><span class="title2">Hematoloy</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
      </div>
      <span>Hepatotoxicity&nbsp;aspirm&nbsp; C9H8O4&nbsp; C1=CC=C(C=C1)C=O</span>
    </div>
    <div id="main">
      <aside class="m1">
        <img :src="defaultImage" alt="">
        <div class="content">
          <h3>Name</h3>
        </div>
      </aside>
      <aside class="m2">
        <div class="title">
          <div class="title1">Toxicity Category</div>
          <div class="title2"><i class="el-icon-download"></i></div>
        </div>
        <div class="list"></div>
      </aside>
      <aside class="m3"></aside>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
  data () {
    return {
      defaultImage:require("../assets/img/icon1.png"),// 默认占位图
      isTry:true
    }
  },
  components:{
    Header,
  },
}
</script>

<style lang="scss" scoped>
  #search{
    margin-top: 50px;
    width: 100%;
    height: 155px;
    background-image: url(~@/assets/img/search_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    span{
height: 19px;
font-size: 16px;
font-family: Helvetica;
color: rgba(255,255,255,0.65);
line-height: 19px;
    }
    #search_box{
      position: relative;
      width: 620px;
      height: 50px;
      background: #F1F2F7;
      border-radius: 2px;
      padding-left: 14px;
      margin: 8px 0;
      #try{
        width: 40px;
        height: 24px;
        font-size: 14px;
        font-family: Helvetica;
        color: #17233D;
        line-height: 24px;
      }
      #button{
        width: 88px;
        height: 50px;
        background: linear-gradient(270deg, #8853FF 0%, #5564FE 100%);
        border-radius: 0px 2px 2px 0px;
        font-size: 28px;
        color: #FFFFFF                ;
      }
      input{
        flex: 1;
      }
      #search_box_muen {
          //display: none;
          width: 620px;
          background-color: #fff;
          position: absolute;
          top: 55px;
          left: 0px;
          z-index: 999;
          li {
            line-height: 25px;
          }

          h2 {
            width: 334px;
            height: 20px;
            font-size: 16px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #17233d;
            line-height: 20px;
            margin-left: 16px;
          }
          .title1 {
            width: 91px;
            height: 22px;
            font-size: 14px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #515a6e;
            line-height: 22px;
          }
          .title2 {
            width: 302px;
            height: 20px;
            font-size: 12px;
            font-family: Helvetica;
            color: #6e5bfe;
            line-height: 20px;
          }
          .title3 {
            width: 91px;
            height: 22px;
            font-size: 12px;
            font-family: Helvetica-Bold, Helvetica;
            font-weight: bold;
            color: #515a6e;
            line-height: 22px;
          }
        }
    }
  }
  #main{
    width: 100%;
    height: 1713px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    .m1{
      width: 1340px;
      height: 337px;
      background: linear-gradient(331deg, #F9F6FF 0%, #FFFFFF 100%);
      border-radius: 2px 2px 0px 0px;
      
      background-repeat: no-repeat;
      //background-size: cover;
      background-position: bottom right;
      border-top: solid 6px #8853FF;
      background-color: linear-gradient(331deg, #F9F6FF 0%, #FFFFFF 100%);
      background-image: url(~@/assets/img/home_bg3.png);
      padding: 25px 0 25px 25px;
      display: flex;
      justify-content: space-between;
      img{
        width: 288px;
        height: 288px;
        background: #FFFFFF;
        border-radius: 2px;
        border: 1px solid #DCDEE2; 
        margin-right: 25px;       
      }
      .content{
        flex: 1;
        h3{
          width: 433px;
          // height: 29px;
          font-size: 24px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #17233D;
          line-height: 29px;          
        }
      }
    }
    .m2{
      width: 1340px;
      height: 615px;
      .title{
        width: 1340px;
        height: 49px;
        display: flex;
        
        .title1{
          //width: 433px;
          height: 24px;
          font-size: 20px;
          font-family: Helvetica-Bold, Helvetica;
          font-weight: bold;
          color: #17233D;
          line-height: 24px;
        }
        .title2{
          width: 114px;
          height: 40px;
          background: linear-gradient(270deg, #8853FF 0%, #5564FE 100%);
          border-radius: 2px;         
        }
      }
    }
    .m3{
      width: 1340px;
      height: 615px;
    }
  }
</style>